<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>面向疫情分析的摸鱼行动</title>
    <link rel="icon" href="img/BD2.png">
    <link rel="stylesheet" type="text/css" href="css/index_style.css"/>


</head>
<body>
<div class="totop">

</div>
<header>
    <div>
        <!--    <span class="iconfont icon-caidanguanli"></span>-->
        <!-- <a href="*" class="logo">✎㉿𝒴𝒢ℳ</a> -->
<!--        <img src="img/apple_icon_2x.png" >-->
    </div>
    <ul>
        <li><div id="M_Gn"><a href="#head_content">国内疫情</a></div></li>
        <li><div id="M_Gw"><a href="#head_content">国外疫情</a></div></li>
        <li><div id="M_Ss"><a href="#tt">实时播报</a></div></li>
<!--        <li><a href="#">服务</a></li>-->
<!--        <li><a href="#">作品</a></li>-->
<!--        <li><a href="#">联系</a></li>-->
    </ul>
</header>
<!-- 页面头部区域 -->
<div id="head_content">
    <div class="head_logo">
        <img src="img/lll.png" height="50"/>
    </div>
    <div class="sub_title">
        新型冠状病毒肺炎
    </div>
    <div class="title">
        <h1>疫情实时大数据报告</h1>
    </div>
    <div class="readnum">
        数据来源于国家和省市卫健委
    </div>
</div>

<!-- 页面主体区域 -->
<div id="body_content">
    <!-- lab页 -->
    <div id="yiqing_lab">
        <div id="yiqing_in">
            <span class="active">国内疫情</span>
        </div>
        <div id="yinqing_out">
            <span>国外疫情</span>
        </div>
        <div id="news">
            <span><a href="#tt">实时播报</a></span>
        </div>
    </div>

    <!-- 国内疫情数据展示 -->
    <div id="yiqing_data_block_in" class="guoneiyiqing">
        <div class="title">
            <h4>国内疫情</h4>
            <span>数据更新至
						<span id="update_time"></span>
					</span>
            <div class="shuju">
						<span>
							<img src="img/wh.png" height="14"/>
							数据说明
						</span>
            </div>

        </div>

        <div class="content">
            <div class="block">
                <div class="block_title">

                    新增确诊

                </div>
                <div class="num_block num_color_1">
                    <span class="add_con">83147</span>
                </div>
            </div>

            <div class="block">

                <div class="block_title">
                    新增无症状
                </div>
                <div class="num_block num_color_1">
                    <span id="add_no">11</span>
                </div>
            </div>
            <div class="block">
                <div class="block_title ">
                    现有确诊
                </div>
                <div class="num_block num_color_1">
                    <span id="now_con">11</span>
                </div>
            </div>
            <div class="block">

                <div class="block_title">
                    现有无症状
                </div>
                <div class="num_block num_color_1">
                    <span id="now_no">11</span>
                </div>


            </div>
        </div>

        <br><br>
        <div class="content">
            <div class="block">
                <div class="block_title">
                    累计确诊
                </div>
                <div class="num_block num_color_2">
                    <span id="con">11</span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1 num_color_2">+<span class="add_con">83147</span></span>
                </div>
            </div>
            <div class="block">
                <div class="block_title">
                    累计境外
                </div>
                <div class="num_block num_color_3">
                    <span id="out"></span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1 num_color_3">+<span class="add_out">83147</span></span>
                </div>
            </div>

            <div class="block">

                <div class="block_title">
                    累计治愈
                </div>
                <div class="num_block num_color_4">
                    <span id="recover"></span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1 num_color_4">+<span class="add_recover">83147</span></span>
                </div>


            </div>
            <div class="block">

                <div class="block_title">
                    累计死亡
                </div>
                <div class="num_block">
                    <span id="dead"></span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1">+<span class="add_dead">83147</span></span>
                </div>
            </div>
        </div>
    </div>

    <div id="yiqing_data_block_out" class="guoneiyiqing">
        <div class="title">
            <h4>国外疫情</h4>
            <span>数据更新至
					<span id="out_update_time"></span>
					</span>
        </div>

        <br><br>

        <div class="content">
            <div class="block">
                <div class="block_title">
                    累计确诊
                </div>
                <div class="num_block num_color_2">
                    <span id="out_con">11</span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1 num_color_2"><span id="add_con">83147</span></span>
                </div>
            </div>
            <div class="block">
                <div class="block_title">
                    现有确诊
                </div>
                <div class="num_block num_color_3">
                    <span id="out_out"></span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1 num_color_3"><span id="add_out">83147</span></span>
                </div>
            </div>

            <div class="block">

                <div class="block_title">
                    累计治愈
                </div>
                <div class="num_block num_color_4">
                    <span id="out_recover"></span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1 num_color_4"><span id="add_recover">83147</span></span>
                </div>

            </div>
            <div class="block">

                <div class="block_title">
                    累计死亡
                </div>
                <div class="num_block">
                    <span id="out_dead"></span>
                </div>
                <div class="change">
                    较昨日
                    <span class="block1"><span id="add_dead">83147</span></span>
                </div>
            </div>
        </div>
    </div>

    <!-- 地图区域 -->
    <div class="map_block" id="map1">
        <!-- lab切换区 -->
        <div class="title">
            <div id="lab_left" class="lab_left active">
                现有确诊
            </div>
            <div id="lab_right" class="lab_right">
                累计确诊
            </div>
        </div>
        <div class="font" id="font1">现有确诊病例，排除治愈、死亡</div>
        <div class="font" id="font2">累计确诊病例，排除治愈、死亡</div>
        <!-- 地图区域 -->
        <div id="now" class="content">

        </div>
        <div id="all" class="content">

        </div>

    </div>
    <!-- 地图区域 -->
    <div class="map_block" id="map2">
        <!-- lab切换区 -->
        <div class="title">
            <div id="lab_left1" class="lab_left active">
                现有确诊
            </div>
            <div id="lab_right1" class="lab_right">
                累计确诊
            </div>
        </div>
        <div class="font" id="font11">现有确诊病例，排除治愈、死亡</div>
        <div class="font" id="font22">累计确诊病例，排除治愈、死亡</div>
        <!-- 地图区域 -->
        <div id="out_now" class="content">

        </div>
        <div id="out_all" class="content">

        </div>

    </div>


    <!--表格区域China-->
    <div class="chart_block" id="chart1">
        <div class="xinzengbentu" style="width: 728px;height: 25px;padding-left: 40px">
            <h4>疫情趋势</h4>
        </div>

        <!-- 表格区域 -->
        <div class="chart_block1">
            <div id="chart1_left" style="width: 768px;height: 500px;">

            </div>
            <div id="chart1_mid" style="width: 768px;height: 500px;">

            </div>
            <div id="chart1_right" style="width: 768px;height: 500px;">

            </div>
        </div>

        <!-- lab切换区 -->
        <div class="title">
            <div id="chart1_lab_left" class="chart_lab active1">
                新增本土趋势
            </div>
            <div id="chart1_lab_mid" class="chart_lab">
                境外输入新增趋势
            </div>
            <div id="chart1_lab_right" class="chart_lab">
                本土新增疑似病例
            </div>
        </div>
    </div>
    <!--表格区域World-->
    <div class="chart_block" id="chart2">
        <div class="xinzengbentu" style="width: 728px;height: 25px;padding-top: 40px;padding-left: 40px">
            <h4>疫情趋势</h4>
        </div>

        <div class="chart_block1">
            <!-- 表格区域 -->
            <div id="chart2_left" style="width: 768px;height: 500px;">

            </div>
            <div id="chart2_mid" style="width: 768px;height: 500px;">

            </div>
            <div id="chart2_right" style="width: 768px;height: 500px;">

            </div>
        </div>

        <div class="title">
            <div id="chart2_lab_left" class="chart_lab active1">
                国外新增确诊趋势
            </div>
            <div id="chart2_lab_mid" class="chart_lab">
                国外累计确诊/现有确诊
            </div>
            <div id="chart2_lab_right" class="chart_lab">
                国外治愈/死亡
            </div>
        </div>
    </div>

	<div class="tt" id="root" style="padding-bottom: 40px;">
		<table style="padding-left: 15px;padding-right: 15px;table-layout: fixed;width: 100%;text-align: center;border-spacing: 0 .3125rem;font-size: .8125rem;color: #4d5054;">
			<div id="huizong" style="padding-top:50px;padding-left:15px;padding-right: 15px;">
				<div class="title" style="width: 728px;height: 40px;
				padding-top: 20px;padding-bottom: 20px;">
					<h4>国内各地区疫情统计汇总</h4>
					<span style="font-size: 13px;color: #999999;">7:00-10:00为更新高峰，数据若滞后敬请谅解</span>
				</div>
				<div id="yq_lab"
					 style="color: #555;font-size: .75rem; background-color:rgb(245,246,247); width: 100%;height: 40px;border-bottom: 1px solid rgb(245,246,247);">
					<div style="width: 172px;border: 1px solid white;height: 44px;text-align: center;float: left;line-height: .875rem;display: flex;justify-content: left;align-items: center;">
            <span style="padding-left: 10px; white-space: pre-wrap;font-weight: 500;font-family: PingFangSC-Medium;">省市
地区</span>
					</div>
					<div style="width: 139px;border: 1px solid white;height: 44px;text-align: center;float: left;line-height: .875rem;display: flex;justify-content: center;align-items: center;">
            <span style="white-space: pre-wrap;font-weight: 500;font-family: PingFangSC-Medium;">累计
确诊</span>
					</div>
					<div style="width: 139px;border: 1px solid white;height: 44px;text-align: center;float: left;line-height: .875rem;display: flex;justify-content: center;align-items: center;">
            <span style="white-space: pre-wrap;font-weight: 500;font-family: PingFangSC-Medium;">累计
治愈</span>
					</div>
					<div style="width: 139px;border: 1px solid white;height: 44px;text-align: center;float: left;line-height: .875rem;display: flex;justify-content: center;align-items: center;">
            <span style="white-space: pre-wrap;font-weight: 500;font-family: PingFangSC-Medium;">累计
死亡</span>
					</div>
					<div style="width: 139px;border: 1px solid white;height: 44px;text-align: center;float: left;line-height: .875rem;display: flex;justify-content: center;align-items: center;">
            <span style="white-space: pre-wrap;font-weight: 500;font-family: PingFangSC-Medium;">现有
确诊</span>
					</div>
				</div>

			</div>

			<tr style="background: #f5f6f7;" v-for="item in tables">
				<td style="width: 172px;background-color: #00bec9;color: #fff;font-weight: 700;border-top-left-radius: 3px;border-bottom-left-radius: 3px;">
					<div style="min-height: 1.875rem;display: flex;-webkit-box-align: center;align-items: center;">
						<span style="width: .5625rem;display: inline-block;margin: 0 .3125rem 0 .5rem;"></span>
						<span v-text="item.name">台湾</span>
					</div>
				</td>
				<td v-text="item.con" style="width: 141.5px;color: #555;width: auto;background-color: #f5f6f7;font-size: .8125rem;">66138</td>
				<td v-text="item.recover" style="width: 141.5px;width: auto;background-color: #f5f6f7;color: #4d5054;font-size: .8125rem;">-</td>
				<td v-text="item.dead" style="width: 141.5px;font-size: .75rem;">3003501</td>
				<td v-text="item.now_con" style="width: 141.5px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;">0</td>
			</tr>


		</table>

	</div>
    <div class="ttt" id="tt">
        <div style="padding-left: 15px;padding-right: 15px;padding-top: 30px">
            <div class="title" style="	width: 728px;height: 21px;padding-top: 15px;">
                <h4>实时播报</h4>
            </div>
            <div style="display:flex;margin-top: .625rem;">
                <div id="in_tt" class="active1" style="text-align: center;background-color: rgb(227, 230, 235);color: #555;border-radius: .3125rem;width: 5.5625rem;font-size: .875rem;line-height: 2;position: relative;margin-right: .5rem;height: 1.875rem;">
                    国内咨询<div  style="bottom: -12px;left: 50%;border: solid transparent;height: 0;width: 0;position: absolute; pointer-events: none;border-top-color: #00bec7;border-width: 6px;margin-left: -6px;"></div>
                </div>
                <div id="out_tt" style="text-align: center;background-color: rgb(227, 230, 235);color: #555;border-radius: .3125rem;width: 5.5625rem;font-size: .875rem;line-height: 2;position: relative;margin-right: .5rem;height: 1.875rem;">
                    国外咨询
                </div>
            </div>
            <div id="in_ttt" >
            </div>
            <div id="out_ttt" >


            </div>

        </div>
    </div>

    <div style="width: 768px;margin: 10px auto;margin-bottom: 50px">
        <div style="padding: .875rem 0;display: flex;width: 768px;height: 20px;background-color: white;margin: 15px auto;border-radius: 10px ;justify-content: center;align-items: center;">
            <span style="margin: 0;padding: 0;width: .375rem;background: #0faeb5;border-radius: .375rem;border: .1875rem solid #cfeff0;-webkit-box-flex: 1;display: block;height: .5rem;background-repeat: no-repeat;background-size: .5rem .5rem;background-position: 50%;"></span>
            <span style="margin: 0 70px;">积极防护，保护自己，戴口罩，勤洗手</span>
            <span style="margin: 0;padding: 0;width: .375rem;background: #0faeb5;border-radius: .375rem;border: .1875rem solid #cfeff0;-webkit-box-flex: 1;display: block;height: .5rem;background-repeat: no-repeat;background-size: .5rem .5rem;background-position: 50%;"></span>

        </div>
    </div>

</div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var chartDom = document.getElementById('chart1_left');
    var myChart = echarts.init(chartDom);
    option = {
        xAxis: {
            type: 'category',
            data: ['6-9', '6-10', '6-11', '6-12', '6-13', '6-14', '6-15']
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [820867, 932786, 907871, 935844, 1296705, 1335604, 1320754],
                type: 'line',
                smooth: true,
            }
        ]
    };
    option && myChart.setOption(option);

    var myChart1 = echarts.init(document.getElementById('chart1_mid'));

    myChart1.hideLoading();

    myChart1.setOption(option = {
        xAxis: {
            type: 'category',
            data: ['6-9', '6-10', '6-11', '6-12', '6-13', '6-14', '6-15']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820867, 932786, 907871, 935844, 1296705, 1335604, 1320754],
                type: 'line',
                smooth: true
            }
        ]
    });

    var myChart3 = echarts.init(document.getElementById('chart1_right'));

    myChart3.hideLoading();

    myChart3.setOption(option = {
        xAxis: {
            data: ['6-9', '6-10', '6-11', '6-12', '6-13', '6-14', '6-15']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [820867, 932786, 907871, 935844, 1296705, 1335604, 1320754],
            }
        ]
    });
</script>

<script type="text/javascript" src="js/index_js.js"></script>

<section class="banner"></section>
</body>
</html>
